<template>
	<view :style="viewColor">
		<div class="odiput">
			<div class="odiv" @click="touxian">
				<span>企业LOGO<span class="xxing">*</span></span>
				<view class="oborder">
					<image v-if="form.logo==''" class="logo" :src="imgHost + '/index/logo.png'" mode=""></image>
					<image v-else class="logo" :src="form.logo" mode=""></image>
				</view>
			</div>
			<div class="odiv">
				<span>企业名称或个人名称<span class="xxing">*</span></span>
				<span>
					<input type="text" v-model="form.name" placeholder="企业名称">
				</span>
			</div>
			<!-- <div class="odiv">
				<span>用户名称<span class="xxing">*</span></span>
				<span>
					<input type="text" v-model="form.username" placeholder="请输入姓名">
				</span>
			</div> -->
			<div class="odiv">
				<span>联系电话<span class="xxing">*</span></span>
				<span>
					<input type="text" v-model="form.phone" placeholder="请输入手机号">
				</span>
			</div>

			<div class="odiv">
				<span>所属行业<span class="xxing">*</span></span>
				<view>
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="category_name">
						<input placeholder="请选择所属行业" type="text" disabled readonly v-model="form.type_name">
						<!-- <view v-if="form.type_name" @tap.stop="form.type_name=''" class="iconfont icon-guanbi2"></view> -->
						<!-- <view class='iconfont icon-jiantou'></view> -->
					</picker>
				</view>
			</div>
			<!-- <div class="odiv">
				<span>店铺类型<span class="xxing">*</span></span>
				<view>
					<picker @change="bindPickerChange1" :value="index" :range="storeTypeArr" range-key="type_name">
						<input placeholder="请选择店铺类型" type="text" disabled readonly v-model="form.shop_name">
					</picker>
				</view>
			</div> -->

			<div class="odiv" @click="tiaojiadz">
				<span>公司地址<span class="xxing">*</span></span>
				<view class="dizhi">
					<span class="odxx">{{form.address}}</span>
					<!-- 点击前往 -->
					<image :src="imgHost + '/index/right.png'" mode=""></image>
				</view>
			</div>
			<div class="odiv">
				<span>企业密令<span class="xxing">*</span></span>
				<span style="flex:1;">
					<input type="text" v-model="form.secret_code" placeholder="设置密令其他人加入需要此密令">
				</span>
			</div>
			<div class="odiv">
				<span>推荐人ID</span>
				<span>
					<input type="text" v-model="form.spread_uid" placeholder="推荐人ID(选填)">
				</span>
			</div>
			<!-- 上传图片 -->
			<view class="item no-border odiv">
				<view class='row-middle'>
					<text class="item-title">请上传营业执照及相关资质证明或身份证正反面图片</text>
					<text class="item-desc">(图片最多可上传10张,图片格式支持JPG、PNG、JPEG)</text>
					<view class="upload">
						<view class='pictrue' v-for="(item,index) in images" :key="index" :data-index="index" @click="getPhotoClickIdx">
							<image :src='item'></image>
							<text class='iconfont icon-guanbi1' @click.stop='DelPic(index)'></text>
						</view>
						<view class='pictrue acea-row row-center-wrapper row-column' @click='uploadpic' v-if="images.length < 10">
							<text class='iconfont icon-icon25201'></text>
							<view>上传图片</view>
						</view>
					</view>
				</view>
			</view>
		</div>
		<button class="bacoc" @click="baoc">保存</button>
		<!-- <u-select v-model="show" :list="list" @confirm="confirm"></u-select> -->
	</view>
</template>
<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js';

	import {
		saveent,
		typelist
	} from '@/api/userminp.js'
	import {
		merClassifly,
		getStoreTypeApi
	} from '@/api/store.js';
import { setTimeout } from 'timers';
import { mapGetters } from 'vuex';
	export default {
		data() {
			return {
				index: [0, 0],
				imgHost: HTTP_REQUEST_URL + '/mingpian',
				form: {
					logo: '',
					name: '',
					secret_code: '',
					spread_uid: '',
					type_name: '',
					type_id: '',
					address: '',
					lat: '',
					long: '',
					//  企业类型名称
					shop_name:"",
					// 企业类型id
					shop_id:"",
					// 用户名称
					username:"",
					// 联系电话
					phone:"",
					// 营业执照图片
					pics:[]
				},
				// 企业资质图片
				images:[],
				value: "所属行业",
				show: false,
				delltypelist: [
					[],
					[]
				],
				childArr: [],
				// 所属行业
				array: [
					// [],
					// []
				],
				// 店铺类型
				storeTypeArr:[],
				list: [],
			}
		},
		onShow() {
			this.delltypelist = [
				[],
				[]
			]
			this.getlist()
			this.getStoreType()
			// console.log(this.$store.state.app)
			if(uni.getStorageSync("PHONE")){
				this.form.phone=uni.getStorageSync("PHONE")
			}
			
			console.log(uni.getStorageSync("PHONE"))
			// this.form.address = ""
			// this.form.address = uni.getStorageSync('regio').toString() + "" + uni.getStorageSync('addmin')
		},
		computed: {
			...mapGetters(['viewColor']),
		},
		onLoad() {

		},
		methods: {
			/**
			 * 上传文件
			 *
			 */
			uploadpic: function() {
				let that = this;
				that.$util.uploadImageOne('upload/image', function(res) {
					that.images.push(res.data.path);
				});
			},
			/**
			 * 删除图片
			 *
			 */
			DelPic(index) {
				let that = this,
					pic = this.images[index];
				that.images.splice(index, 1);
				// that.$set(that, 'pics', that.form.images);
			},
			// 图片预览
			// 获得相册 idx
			getPhotoClickIdx(e) {
				let _this = this;
				let idx = e.currentTarget.dataset.index;
				_this.imgPreview(_this.images, idx);
			},
			// 图片预览
			imgPreview: function(list, idx) {
				// list：图片 url 数组
				if (list && list.length > 0) {
					uni.previewImage({
						current: list[idx], //  传 Number H5端出现不兼容
						urls: list
					});
				}
			},
			// 添加地址
			tiaojiadz() {
				// #ifdef H5
				uni.navigateTo({
					url: '/pages/userminp/dizhiym/dizhiym'
				})
				// #endif
				// #ifdef MP
				uni.chooseLocation({
					success: (res) => {
						console.log(res);
						this.form.lat = res.latitude
						this.form.long = res.longitude
						this.form.address = res.address + res.name
					}
				})
				// #endif
			},
			// 所属行业
			getlist() {
				merClassifly().then(res=>{
					this.array=res.data
					console.log(this.array,"array")
				})
				// typelist().then((res) => {
				// 	this.array[0] = res.data.list
				// 	// this.childArr = res.data.list.map((item) => item.children);
				// 	// this.array[1] = this.childArr[0]
				// })
			},
			// 获取店铺类型
			getStoreType: function() {
				getStoreTypeApi()
					.then(res => {
						console.log(res,"123")
						this.storeTypeArr = res.data
					})
					.catch(res => {
						this.$util.Tips({
							title: res
						});
					});
			},
			pickerColumnDept(e) {
				if (e.detail.column == 0) {
					// #ifdef H5
					// 在小程序中直接赋值无效  H5 可直接赋值
					this.array[1] = this.childArr[e.detail.value]
					// #endif
					// #ifdef MP-WEIXIN
					// 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
					this.$set(this.array, 1, this.childArr[e.detail.value])
					// #endif
				}
			},
			baoc() {
				let that = this
				if (!this.form.logo) {
					uni.showToast({
						title: '请上传企业LOGO',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!this.form.name) {
					uni.showToast({
						title: '请输入企业名称',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				// if (!this.form.username) {
				// 	uni.showToast({
				// 		title: '请输入用户名称',
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// 	return;
				// }
				if (!this.form.phone) {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.form.phone)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				if (!this.form.type_name) {
					uni.showToast({
						title: '请选择所属行业',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!this.form.address) {
					uni.showToast({
						title: '请选择公司地址',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				// if (!this.form.shop_name) {
				// 	uni.showToast({
				// 		title: '请选择店铺类型',
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// 	return;
				// }
				if (!this.form.secret_code) {
					uni.showToast({
						title: '请输入企业密令',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if(this.images.length>0){
					this.form.images=this.images.toString()
				}
				saveent(this.form).then((res) => {
					uni.requestSubscribeMessage({
					    tmplIds:['BUAfKOOOscLA-bkHTviUlEXzI_r_OHj-fT3bKQU5caM'],
					    success(res){
							console.log(res,'订阅消息模板');
					    },
					    complete(e){
					      // 不用判断成功失败 在这里处理返回等事件
							uni.showToast({
								title:"创建企业成功",
								icon:"success"
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
					    }
					})
				}).catch( err => {
					 uni.showToast({
						title: err,
						icon: 'none'
					 })
				})
			},
			// 选中所属行业
			bindPickerChange(e) {
				console.log(e ,"选中")
				console.log(this.array[e.detail.value],"this.array[e.detail.value]")
				this.form.type_name=this.array[e.detail.value].category_name
				this.form.type_id=this.array[e.detail.value].merchant_category_id
				// let value = e.target.value;
				// this.index = value;
				// if (this.array[0].length != 0) {
				// 	this.form.type_name = this.array[0][this.index[0]].label;
				// 	this.form.type_id = this.array[0][this.index[0]].value;
				// };
				// console.log(this.array[1]);
				// if (!this.array[1]) {
				// 	this.form.type_name += ',' + ''
				// 	return
				// }
				// if (this.array[1].length != 0) {
				// 	this.form.type_name += ',' + this.array[1][this.index[1]].label
				// }
			},
			// 选中店铺类型
			bindPickerChange1(e){
				console.log(e ,"选中")
				this.form.shop_name=this.storeTypeArr[e.detail.value].type_name
				this.form.shop_id=this.storeTypeArr[e.detail.value].mer_type_id
				console.log(this.storeTypeArr[e.detail.value],"this.array[e.detail.value]")
				
			},
			touxian: function() {
				let that = this;
				this.canvasStatus = true
				that.$util.uploadImageChange('upload/image/pics',(res) => {
					console.log(res);
					console.log(this.form);
					this.form.logo = res.data.path
					console.log(this.form);
					}, (res) => {}, (res) => {})
			},
		}
	}
</script>

<style lang="scss">
	.oborder {
		width: 80rpx;
		height: 80rpx;
		border-radius: 100rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.odiput {
		margin-bottom: 60rpx;


		.odiv {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			border-bottom: 2rpx solid #eee;
			padding: 30rpx;

			.dizhi {
                    flex:1;
				display: flex;
				align-items: center;
                    justify-content: space-between;
                    .odxx{
                     flex:1;    
                     font-weight: 400;
                     font-size: 32rpx;
                     line-height: 44rpx;
                     text-align: left;
                     color: #a0a0a0;
                    }
				image {
					vertical-align: middle;
				}
			}

			span:nth-child(1) {
                    width: 280rpx;
				font-weight: 600;
				font-size: 28rpx;
				line-height: 44rpx;
				text-align: left;
				// color: #161616;
				.xxing {
					font-weight: 600;
					font-size: 32rpx;
					line-height: 44rpx;
					text-align: left;
					color: #e33c21;
				}
			}

			span:nth-child(2) {
				input {
                         
					text-align: right;
				}
			}

			view {
				display: flex;
				font-weight: 400;
				font-size: 32rpx;
				line-height: 44rpx;
				text-align: left;
				color: #a0a0a0;

				.logo {
					width: 100%;
					height: 100%;
					margin-left: 0rpx;
				}

				input {
					text-align: right;
				}

				image {
					margin-left: 10rpx;
					width: 14rpx;
					height: 28rpx;
					vertical-align: middle;
				}
			}
		}
	}

	.bacoc {

		margin: auto;
		width: 464rpx;
		height: 96rpx;
		border-radius: 48rpx;
		background: var(--view-theme);
		box-shadow: 0 12rpx 36rpx rgba(193, 0, 0, 0.1);
		font-weight: 600;
		font-size: 34rpx;
		line-height: 96rpx;
		text-align: center;
		color: #fff;
	}
	.item {
		position: relative;
		// display: block !important;
		.row-middle{
			display: block !important;
		}
		.item-title {
			color: #666666;
			font-size: 28rpx;
			display: block;
		}
		.item-desc {
			color: #B2B2B2;
			font-size: 22rpx;
			display: block;
			margin-top: 9rpx;
			line-height: 36rpx;
		}
	}
	.item .pictrue {
		width: 130rpx;
		height: 130rpx;
		margin: 24rpx 22rpx 0 0;
		position: relative;
		font-size: 11px;
		color: #bbb;
		&:nth-child(4n) {
			margin-right: 0;
		}
		&:nth-last-child(1) {
			border: 0.5px solid #ddd;
			box-sizing: border-box;
		}
		uni-image,
		image {
			width: 100% !important;
			height: 100% !important;
			border-radius: 1px;
			img {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				width: 100%;
				height: 100%;
			}
		}
		.icon-guanbi1 {
			font-size: 33rpx;
			position: absolute;
			top: -10px;
			right: -10px;
		}
	}
	.item .imageCode {
		position: absolute;
		top: 7px;
		right: 0;
	}
	.item .icon {
		font-size: 40rpx;
		color: #b4b1b4;
	}
	.item input {
		width: 400rpx;
		font-size: 30rpx;
	}
	.item .placeholder {
		color: #b2b2b2;
	}
	.item .codeIput {
		width: 125px;
	}
	.uni-input-input {
		display: block;
		height: 100%;
		background: none;
		color: inherit;
		opacity: 1;
		-webkit-text-fill-color: currentcolor;
		font: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		text-align: inherit;
		text-indent: inherit;
		text-transform: inherit;
		text-shadow: inherit;
	}
	.item .code {
		position: absolute;
		width: 93px;
		line-height: 27px;
		border: 1px solid var(--view-theme);
		border-radius: 15px;
		color: var(--view-theme);
		text-align: center;
		bottom: 8px;
		right: 0;
		font-size: 12px;
	}
	.item .code.on {
		background-color: #bbb;
		color: #fff;
		border-color: #bbb;
	}
	.upload {
		display: -webkit-box;
		display: -moz-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.upload {
		margin-top: 20rpx;
	}
</style>
